آموزش تسلط بر WebRTC: ارتباطات بلادرنگ با جاوا اسکریپت [ویدیو] - آخرین آپدیت

سرفصل ها و درس ها

مقدمه‌ای بر WebRTC Introduction to WebRTC

• محدودیت‌های HTTP سنتی Traditional HTTP has limitations

• معرفی WebRTC WebRTC - an introduction

• اولین تماس ویدئویی WebRTC بین فایرفاکس و کروم First WebRTC video call between Firefox and Chrome

• استانداردهای WebRTC (W3C) و RFCها WebRTC is governed by a specification (W3C) and many RFCs

• موارد استفاده از WebRTC (برخی موارد ممکن است شما را شگفت‌زده کند) WebRTC use cases (some of the use cases may surprise you)

• سورس کد WebRTC WebRTC source code

• تابع RTCPeerConnection و دو جنبه حیاتی WebRTC The RTCPeerConnection function, "new" and the 2 most important aspects of WebRTC

تئوری WebRTC WebRTC Theory

• دسترسی به دستگاه ویدئویی کاربر (GUM) Accessing a user's video device (GUM)

• استفاده از متد enumerateDevices برای دسترسی به ID دستگاه خاص Using the enumerateDevices() method to access a specific device ID

• نمایش استریم رسانه در تگ ویدیو Displaying a media stream inside of a tag

• چگونه خود را شناسایی کنید (ipconfig، netstat و IPهای عمومی) How do you identify yourself (ipconfig, netstat and public IPs)

• NAT چیست؟ What is NAT?

• مقدمه‌ای بر کاندیداهای HOST و STUN Introduction to HOST and STUN candidates

• تجسم جریان کاری WebRTC WebRTC workflow visualized

• فریم‌ورک Ice و Ice Agent چیستند؟ What is the Ice Framework and who is the Ice Agent?

• بررسی شیء RTCPeerConnection Examining the RTCPeerConnection object

• معرفی chrome://webrtc-internals و about:webrtc Introduction to chrome://webrtc-internals and about:webrtc

• رویداد onicecandidate The onicecandidate event

• ایجاد یک Offer در WebRTC Creating a WebRTC offer

• روش‌های مختلف کار با Promiseها و توابع در جاوا اسکریپت The different ways to deal with Promises and functions in JavaScript

• مدیریت WebRTC توسط توصیفات نشست (Session Descriptions) WebRTC is managed by session descriptions

• توصیف نشست از راه دور (Remote Session Description) Remote session description

• پروتکل برقراری نشست جاوا اسکریپت (JSEP) JavaScript Session Establishment Protocol (JSEP)

• استفاده از getTracks و setTrack برای افزودن رسانه ویدئویی به اتصال Using getTracks() and setTrack() to add video media to your peer connection

• استفاده از getStats برای مشاهده گزارش‌های آماری اتصال WebRTC Using getStats() to view statistic reports related to the WebRTC connection

• یک OFFER دقیقاً چه چیزی را نشان می‌دهد و چگونه SDP را سفارشی کنیم؟ What exactly does an OFFER indicate, and how to customize the SDP?

• تولید کاندیداهای ice از نوع HOST Generating HOST ice candidates

• گوش دادن به رویداد onnegotiationneeded Listening for the onnegotiationneeded event

• توضیح ویژگی candidate، sdpMid، sdpMLineIndex و موارد دیگر Explaining the candidate property, sdpMid, sdpMLineIndex, and more

• سرورهای STUN چیستند؟ What are STUN servers

• افزودن پیکربندی‌های STUN به شیء RTCPeerConnection Adding STUN configurations to our RTCPeerConnection object

• استفاده از Wireshark برای تحلیل درخواست و پاسخ STUN Using Wireshark to analyze a STUN request and response

• چرا STUN گاهی اوقات شکست می‌خورد؟ Why does STUN sometimes fail?

• سرورهای TURN چیستند؟ What are TURN servers

• سرور سیگنالینگ و انواع مختلف آن (SIP, XMPP, WebSockets, AJAX و غیره) Signaling server and the different types (SIP, XMPP, WebSockets, AJAX, etc)

• مرور دقیق اتصال WebRTC WebRTC Detailed Connection Overview

• گام نهایی: بررسی‌های اتصال (Connectivity Checks) The final step - connectivity checks

آماده‌سازی محیط و راه‌اندازی سرور Node Prepare environment and set up Node Server

• مرور کلی HTML HTML overview

• راه‌اندازی پوشه‌ها، اسکریپت‌ها، ماژول‌ها و محاسبه ID منحصر به فرد Setting up folders, script, modules, and calculating a unique ID

• تعریف وضعیت (State) در فرانت‌اند و ست‌کننده‌ها Defining state on the frontend, and setters

• استفاده از جاوا اسکریپت برای فعال‌سازی مودال Using JavaScript to enable the modal

• بستن مودال با افزودن Event Listener به شیء window Closing the modal by adding an event listener on the window object

• بهبود نام‌گذاری المان مودال و حذف کلاس hidden Improving the naming of our modal element, and removing the hidden class

• کد سرور: شروع پروژه Node و نصب وابستگی‌ها Server Code - initiating a Node project and installing dependencies

• راه اندازی سرور HTTP نود و سرو کردن فایل‌های فرانت‌اند Spinning up Node's HTTP server, and serving the frontend files

• نصب Nodemon و تنظیم اسکریپت start Installing Nodemon, and setting up a "start" script

• گوش دادن به اتصال WebSocket و استخراج پارامترهای Query Listening for a WebSocket connection, and extracting query parameters

• ایجاد وضعیت سرور برای کاربران متصل Creating server state for connected users

• ایجاد درخواست WebSocket در سمت کلاینت با استفاده از API بومی WebSocket Initiating a WebSocket request on the client side using the native WebSocket API

• سمت سرور: منطق قطع اتصال و هندلر رویداد پیام Server side - disconnection logic and message event handler

• سمت کلاینت: بروزرسانی وضعیت و ثبت Event Listenerهای WebSocket Client side - updating state and registering WebSocket event listeners

• سمت کلاینت: تعریف یک لاگر (Logger) سفارشی Client side - define a custom logger

• سمت کلاینت: تعریف فایل ثابت‌ها و تست لاگر سفارشی Client side - defining a constants file and testing custom logger

• سمت کلاینت: تعریف Event Listenerهای فرانت‌اند برای WebSocket Client side - defining WebSocket frontend event listeners

• تعریف یک Getter برای شیء وضعیت (State) Defining a getter for our state object

پیاده‌سازی منطق اتصال اتاق قبل از WebRTC Implement room connection logic before WebRTC

• ایجاد اتاق: تنظیم Event Listener کلیک در فرانت‌اند Create Room - set up frontend click event listener

• ایجاد اتاق: ارسال درخواست POST AJAX Fetch به سرور Create Room - send a POST AJAX Fetch request to the server

• ایجاد اتاق: پردازش Chunkها در سرور و استخراج Body درخواست Create Room - process chunks on the server and extract the req body

• ایجاد اتاق: ارسال پاسخ از سرور به کلاینت Create Room - send back a response from the server, to the client

• ایجاد اتاق: مدیریت پاسخ سرور در فرانت‌اند Create Room - dealing with the server response on the frontend

• ایجاد اتاق: بروزرسانی رابط کاربری برای سازنده اتاق Create Room - updating the user interface for the creator of a room

• افزودن رویداد Keypress و بهبود کد Adding a keypress event, and improving code

• رفع باگ (هشدار: مربوط به کلمه کلیدی return است) Fixing the bug (spoiler alert: it's the "return" keyword)

• حذف اتاق: ارسال POST AJAX Fetch برای تخریب اتاق Destroy Room - sending a POST AJAX Fetch to destroy a room

• حذف اتاق: منطق سرور برای حذف اتاق قبل از پیوستن کاربر دوم Destroy Room - server logic to destroy a room before peer2 has joined

• حذف اتاق: تکمیل منطق در فرانت‌اند Destroy Room - finishing logic on the frontend

• افزودن منطق سرور برای حذف اتاق هنگام قطع اتصال کاربر Adding server logic for removing a room when a user disconnects

• رفع خطا Fixing error

• رفع خطای favicon با استفاده از طرح data URI Fixing the favicon error by using the data URI scheme

• پیوستن به اتاق: ارسال درخواست Join از طریق WebSocket Join Room - sending a WebSocket join request

• پیوستن به اتاق: تنظیم switch برای مسیریابی درخواست‌های مختلف Join Room - setting up switch statements to route different requests

• پیوستن به اتاق: بررسی وجود اتاق و ارسال پیام خطا در صورت عدم وجود Join Room - check whether the room exists, and if not, send a failure message

• تعریف یک تابع ارسال عمومی WebSocket (مورد استفاده در WebRTC) Define a generic WebSocket send function (also used for WebRTC)

• پیوستن به اتاق: بررسی پر بودن اتاق و ارسال پیام خطا Join Room - check whether the room is full, and if so, send a failure message

• پیوستن به اتاق: ارسال پاسخ موفق و پیام اطلاع‌رسانی Join Room - sending a successful response and notification message

• پیوستن به اتاق: تنظیم switch برای مدیریت پیام‌های ورودی WebSocket Join Room - setting up switch statements to handle incoming WebSocket messages

• پیوستن به اتاق: تعریف منطق موفقیت در فرانت‌اند Join Room - defining success logic on the frontend

• پیوستن به اتاق: اطلاع‌رسانی به کاربر دیگر درباره پیوستن یک همتا Join Room - notifying the other user that a peer has joined their room

• پیوستن به اتاق: رفع خطا و بروزرسانی کانتینر پیام‌ها Join Room - fixing error and updating the message container

• خروج از اتاق: ارسال پیام WebSocket برای خروج Exit Room - sending a WebSocket message to exit a room

• خروج از اتاق: پردازش درخواست خروج در سرور WebSocket Exit Room - process the exit request on the WebSocket server

• خروج از اتاق: مدیریت پاسخ دریافتی از سرور Exit Room - handling the response from the server

• تست اپلیکیشن Testing the application

• افزودن منطق قطع اتصال در سرور Add disconnection logic on the server

• افزودن منطق قطع اتصال در فرانت‌اند Add disconnection logic on the frontend

• پرداخت‌های نهایی و فایل‌های سورس Final touch-ups and source files

استفاده از WebRTC برای ایجاد اتصال مستقیم همتا-به-همتا Use WebRTC to establish a direct peer-to-peer connection

• مرور فرآیند WebRTC و فایل md. WebRTC process recap and .md file

• مرحله ۱: تنظیم سرورهای پیکربندی STUN STAGE 1 - setting up STUN configuration servers

• شروع فرآیند WebRTC Triggering the WebRTC process

• بروزرسانی UI و نمایش دکمه‌ها Updating UI and displaying buttons

• ایجاد شیء Peer Connection Creating a peer connection object

• Event Listenerهای connectionstatechange و signalingstatechange The connectionstatechange and signalingstatechange event listeners

• تکمیل منطق هندلر رویداد Completing event handler logic

• بروزرسانی UI پس از کلیک کاربر بر روی دکمه Updating UI after a user clicks a button

• تست کدها Testing our code

• اجرای تابعی برای ایجاد Data Channel Trigger a function to create a Data Channel

• مرور کلی WebRTC Data Channel WebRTC Data Channel Overview

• ایجاد کانال داده WebRTC و تنظیم Event Listener برای ondatachannel Creating a WebRTC data channel, and setting up ondatachannel event listener

• تست و مشاهده webrtc-internals در کروم Testing and viewing Chrome's webrtc-internals

• ایجاد یک Offer در WebRTC Creating a WebRTC offer

• تنظیم Local Description و گوش دادن به ICE candidates Set local description and listen for ice candidates

• تست تولید ICE Testing ice generation

• تنظیم تابع برای ارسال Offer Setting up function to send an offer

• ارسال Offer به سرور سیگنالینگ (پایان مرحله ۱) Sending an offer to the signaling server (end of Stage 1)

• مرحله ۲: تنظیم مسیرهای تابع و ارسال Offer به PEER2 Stage 2 - setting up function routes, and sending offer to PEER2

• شروع مرحله ۳: دریافت Offer توسط PEER2 Stage 3 begins - PEER2 receiving an offer

• رفع باگ و تایید دریافت Offer توسط PEER2 Fixing a bug, and confirming that PEER2 has received the offer

• نمایش دکمه‌های PEER2 Showing PEER2 buttons

• ایجاد شیء Peer Connection برای PEER2 Create PEER2's peer connection object

• ثبت رویداد ondatachannel روی شیء pc در PEER2 Registering the ondatachannel event on PEER2's pc object

• تایم‌اوت: مشاهده listener مربوط به ondatachannel روی شیء pc Timeout - viewing the ondatachannel listener on the pc object

• تنظیم Remote Description با Offer ارسالی PEER1 Set remote description with PEER1's offer

• ایجاد Answer در WebRTC و تنظیم Local Session Description با آن Answer Create WebRTC answer, and set local session description with that answer

• اصلاحات نهایی Touchups

• ارسال Answer به سرور سیگنالینگ Send WebRTC answer to signaling server

• ارسال ICE candidates به سرور سیگنالینگ Send ice candidates to signaling server

• شروع مرحله ۴: دریافت Answer و ICE candidates توسط سرور Stage 4 begins - server receiving answer and ice candidates

• ایجاد یک تابع پیام سیگنالینگ عمومی برای پیام‌های WebRTC Creating a generic signaling message function for WebRTC messages

• شروع مرحله ۵: دریافت Answer و ICE candidates توسط PEER1 Stage 5 begins - PEER1 receiving an answer and ice candidates

• تایم‌اوت: تست کدها Timeout - testing code

• ارسال ICE candidates به PEER2 Sending ice candidates to PEER2

• مدیریت ICE candidates دریافت شده Handle ice candidates received

• تنظیم Remote Description با Answer و پیمایش در بافر ICE Setting remote description with the answer, and looping through ice buffer

• دستاورد: تست اتصال WebRTC MILESTONE - testing the WebRTC connection

• بروزرسانی UI و نمایش المان‌های ورودی پیام Update UI and show message input elements

• افزودن پیام‌های ارسالی به UI فرستنده Add outgoing messages to the sender's UI

• ارسال پیام در یک WebRTC Data Channel Sending a message on a WebRTC Data Channel

• گوش دادن به پیام‌های ورودی در dataChannel و بروزرسانی UI Listen for incoming messages on the dataChannel, and update UI

• بستن Peer Connection و Data Channel هنگام خروج از اتاق Closing a peer connection and data channel when exiting a room

• تست بستن WebRTC برای کاربری که از اتاق خارج می‌شود Testing WebRTC closure for the user exiting the room

• استفاده از webrtc-internals برای تحلیل کل فرآیند WebRTC Using webrtc-internals to analyze the entire WebRTC process

• بستن اتصال همتای دوم Closing the second peer's connection

• WebRTC می‌تواند بدون سرور کار کند WebRTC can work without the server

• تحلیل WebRTC در Wireshark Analyzing WebRTC in Wireshark